<template>
	<view class="accept-container">
		<view class="list">
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>业主姓名：</text>
				<input type="text" placeholder="请输入姓名">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>联系电话：</text>
				<input type="number" placeholder="请输入电话号码">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>装修地址：</text>
				<input type="text" placeholder="请输入装修地址">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>竣工时间：</text>
				<!-- <input type="text" placeholder="请输入姓名"> -->
				<view @click="selectDatePicker(type,index)">{{value}}</view>
				<date-time-picker ref='date-time' :indicatorStyle='indicatorStyle' :type='type' :datestring='dateString' @change='dateTimeChange'>
				</date-time-picker>
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>预约验收时间：</text>
				<input type="text" placeholder="请输入姓名">
			</view>
		</view>
		<button class="btn">提交申请</button>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'
	export default {
		components: {
			DateTimePicker
		},
		data() {
			return {
				dateString: '',
				type: 'date',
				value: '请选择时间'
			}
		},
		computed: {
			indicatorStyle() {
				return {
					background: 'rgba(255,255,255,.1)',
					height: '40px',
				};
			}
		},
		methods: {
			selectDatePicker(type, index) {
				this.type = type;
				this.index = index;
				this.$refs['date-time'].show();
			},
			dateTimeChange(value) {
				// let item = this.list[this.index];
				// item['detail'] = value;
				this.value = value
				// this.list.splice(this.index, 1, item);
			}
		}
	}
</script>

<style lang="scss">
	.accept-container {
		background-color: #f5f5f5;
		height: 100vh;
		.list {
			.list-item {
				padding-left: 18rpx;
				width: 750rpx;
				height: 88rpx;
				display: flex;
				color: #333;
				border-bottom: 2rpx solid #f5f5f5;
				align-items: center;
				background-color: #fff;

				input {
					height: 60rpx;
					// background-color: pink;
					width: 500rpx;
				}
			}

			// .text {
			// 	width: 750rpx;
			// 	height: 232rpx;
			// 	padding-left: 28rpx;
			// 	background-color: #fff;
			// }
		}

		.btn {
			width: 568rpx;
			height: 80rpx;
			color: #fff;
			font-size: 32rpx;
			background: #1064E9;
			border-radius: 8rpx;
			margin-top: 250rpx;
			margin-left: 92rpx;
		}
	}
</style>
